<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="book in bookList">{{book.bookName}}</li>
    </ul>
    <form>
        <input type="text" name="id" v-model="book.id">
        <input type="text" name="bookName" v-model="book.bookName">
        <button @click="demo()">提交</button>
    </form>
</div>
</body>
</html>
<script>
    new Vue({
        el: "#app",
        data: {
            bookList: [],
            book: {
                bookName: "",
                id: ""
            }
        },
        created: function () {
            /*
                    axios.get("请求路径").then(function(){发送成功后执行此方法体}).catch(function(){发送失败后执行此方法体})
             */
            var _this = this;
            axios.get("./book/findAll").then(function (resp) {
                _this.bookList = resp.data;
            })
        },
        methods: {
            demo: function () {
                var _this = this;
                axios.get("./book/update", _this.book).then(function (resp) {

                })
            }

        }

    })
</script>